<!--头部公共部分-->
{include file="common/header" /}
<!--suppress ALL -->
<script>
    var class_status = '{$class_status}'; //0表示非补课班级，1表示补课班级
    function  Hide(cell)
    {
        var obj  =  document.getElementById("showTb");
        for(i=0;i<obj.rows.length;i++)
        {
            obj.rows[i].cells[cell].style.display  =  "none";
        }
    }

    function  show(cell)
    {
        obj  =  document.getElementById("showTb");
        for(i=0;i<obj.rows.length;i++)
        {
            obj.rows[i].cells[cell].style.display  =  "block";
        }
    }
</script>
<body>
<div style="padding:15px;font-size: 14px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">班级名称:</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="" name="grades_name"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="margin-left:575px;">
                <label class="layui-form-label">上课时间:</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="" name="class_time" autocomplete="off"
                           class="layui-input">

                </div>
            </div>


        </div>


        <div class="layui-form-item">


            <div class="layui-inline" >
                <label class="layui-form-label">上课内容:</label>
                <div class="layui-input-inline" style="width: 1090px">
                    <textarea type="text"  name="content_area" value="" autocomplete="off"
                           class="layui-input"></textarea>
                </div>
            </div>
        </div>

        <div class="layui-form-item">


            <div class="layui-inline" >
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-inline" style="width: 1090px">
                    <textarea type="text" name="remarks_area"  value="" autocomplete="off"
                              class="layui-input"></textarea>
                </div>
            </div>
        </div>





        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" id="search_name" name="student_name" placeholder="请输入学员姓名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search"></i>筛选</button>
                <button class="layui-btn layui-btn-danger" id="rest">
                    <i class="layui-icon"></i>重置</button>
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-warm" id="add_students">
                    <i class="layui-icon layui-icon-add-circle-fine"></i>添加学员</button>
            </div>
        </div>

        <div class="layui-form-item " id="div_elimination" style="margin-left: -10px">
            <div class="layui-inline" >
            <input  type="checkbox"  lay-filter="elimination" value="0" name="elimination" title="动态课消?">
            </div>
        </div>

        <div class="layui-form-item" >
            <table class="layui-table" style="width: 1210px;" id="showTb">
                <thead>
                <tr>
                    <th style="text-align: center;">姓名</th>
                    <th style="text-align: center;">联系电话</th>
                    <th style="text-align: center;">缺勤原因</th>
                    <th style="text-align: center;"><span class="layui-form-label">计费次数</span><input type="number" min="0" id="class_elimination_head" style="width:60px;" autocomplete="off" value="0" class="layui-input"></th>
                    <th style="text-align: center; width: 150px; ">备注</th>
                    <th style="text-align: center;"><input type="checkbox" lay-filter="attendance" name="attendance" title="出勤" lay-skin="primary" ></th>
                    <th style="text-align: center;"><input type="checkbox" lay-filter="charging" name="charging" title="计费" lay-skin="primary" ></th>
                    <th style="text-align: center; width: 80px; ">剩余课时</th>
                    <th style="text-align: center;"><a id="empty"><i class="layui-icon layui-icon-delete"></i></a></th>
                </tr>
                </thead>
                <tbody id="xq">
                <script>

                    var jsondata = eval('{$jsondata}');
                    var id = '{$id}';
                    console.log("jsondata:"+jsondata.length)
                    console.log(jsondata)
                    for(var i =0; i < jsondata.length; i ++){
                        document.write('<tr>');
                        document.write('<td style="text-align: center;">'+jsondata[i].student_name+'</td>');
                        document.write('<td style="text-align: center;">'+jsondata[i].phone+'</td>');
                        document.write('<td style="width: 100px;text-align: center;"> <select name="reasons" lay-filter="reasons_select" id="reasons_id" > <option value=""></option> <option value="事假">事假</option> <option value="病假">病假</option> <option value="旷课">旷课</option> <option value="迟到">迟到</option> </select> </td>');

                        /*
                        if(jsondata[i].student_type == 3){
                            document.write('<td>---</td>');
                        }else{
                            document.write('<td><span class="layui-form-label">计费次数</span><input type="number" min="1" name="elimination_item" style="width:60px;" autocomplete="off" value="1" class="layui-input"></td>');
                        }
                        */

                        document.write('<td style="text-align: center;"><span class="layui-form-label">计费次数</span><input   type="number" min="0"  name="elimination_item"  style="width:60px;" autocomplete="off" value="0" class="layui-input"></td>');

                        document.write('<td style="text-align: center;"><input type="text"   id="remarks" name="remarks" placeholder="备注:" autocomplete="off" class="layui-input"></td>');
                        document.write('<td style="text-align: center;"><input type="checkbox" lay-filter="attendance_item" title="出勤" name="attendance_item" lay-skin="primary" ></td>');
                       /*
                        if(jsondata[i].student_type == 3) {
                            document.write('<td>---</td>');
                        }else{
                            document.write('<td><input type="checkbox" lay-filter="charging_item" title="计费"  name="charging_item" lay-skin="primary" ></td>');
                        }
                        */
                        document.write('<td style="text-align: center;"><input type="checkbox" lay-filter="charging_item" title="计费"  name="charging_item" lay-skin="primary" ></td>');
                        document.write('<td style="text-align: center;"><font color="#FF0000">'+jsondata[i].surplus_class_elimination+'</font></td>');
                        document.write('<td style="text-align: center;" onclick="classForm_remove(this)"><input type="hidden" name="pos" value='+ jsondata[i].id +'><a id="empty" style="cursor: pointer" title="清空"><i class="layui-icon layui-icon-delete"></i></a></td>');
                        document.write('</tr>');
                    }


                    /***考勤人数等状态信息**/
                    document.write('<tr>');
                    document.write('<td style="text-align: center;"><span style="color: #00b7ee">共:'+jsondata.length+'(人)</span></td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="width: 100px;text-align: center;">---</td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="text-align: center;"><span style="color: #00b7ee">出勤:'+0+'(人)</span></td>');
                    document.write('<td style="text-align: center;"><span style="color: #00b7ee">计费:'+0+'(人)</span></td>');
                    document.write('<td style="text-align: center;">---</td>');
                    document.write('<td style="text-align: center;" onclick="classForm_all(this)"><input type="hidden" name="pos" value='+ id +'><a id="empty" style="cursor: pointer" title="清空全部"><i class="layui-icon layui-icon-delete"></i></a></td>');
                    document.write('</tr>');


                        Hide(3);  //隐藏第3列,课消记录
                    if(class_status == 1){   //1表示补课班级
                     //   Hide(6);//隐藏计费
                      //  $('#div_elimination').hide();
                    }

                </script>
                </tbody>
            </table>
        </div>
        <div class="layui-form-item"  style="text-align: center">

                <a class="layui-btn layui-btn-normal" lay-submit lay-filter="sure">确定</a>
                <a class="layui-btn  layui-btn-primary" lay-submit lay-filter="cancel">取消</a>

        </div>
    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>


    //改变剩余课消数量
    function on_Change(obj) {
        var value_num = $(obj).find("input[name='elimination_item']").val();
        var elimination_items =  document.getElementsByName("elimination_item");
        var obj_box  =  document.getElementById("showTb"); //获取表格的对象
        for(var i =0; i < elimination_items.length; i ++){
              console.log(elimination_items[i].value)
              obj_box.rows[i+1].cells[7].innerHTML = '<font color="#FF0000">'+(jsondata[i].surplus_class_elimination - elimination_items[i].value)+'</font>';
            }

    }


    //清除当前点击的tr
    function classForm_remove(obj)
    {
        var id = $(obj).find("input[name='pos']").val();
        var field = {};
        field.content_area = $('textarea[name=content_area]').val();
        field.remarks_area = $('textarea[name=remarks_area]').val();
        field.id = id;
        $.ajax({
            url: '/admin/arranging/remove_item',
            method: "post",
            data: field,
            beforeSend: function () {
                isLoad = layer.load(0, {
                    shade: false
                }); //0代表加载的风格，支持0-2
            },
            success: function (result) {
                layer.msg(result.msg);
                if (result.code === 1) {
                    location.reload();
                }

            },
            complete: function () {
                layer.close(isLoad)
            },
            error: function (error) {
                console.log(error)
            }
        });
        $(obj).closest("tr").remove();
    }



    //清除所有的tr
    function classForm_all(obj)
    {
        var id = $(obj).find("input[name='pos']").val();
        var field = {};
        field.content_area = $('textarea[name=content_area]').val();
        field.remarks_area = $('textarea[name=remarks_area]').val();
        field.id = id;
        $.ajax({
            url: '/admin/arranging/remove_all',
            method: "post",
            data: field,
            beforeSend: function () {
                isLoad = layer.load(0, {
                    shade: false
                }); //0代表加载的风格，支持0-2
            },
            success: function (result) {
                layer.msg(result.msg);
                if (result.code === 1) {
                    location.reload();
                }

            },
            complete: function () {
                layer.close(isLoad)
            },
            error: function (error) {
                console.log(error)
            }
        });

    }


    layui.use(['table','element', 'layedit', 'jquery', 'form', 'laydate', 'layer'], function () {
        let $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            element = layui.element,
            laydate = layui.laydate,
            jquery = layui.jquery;



        //搜索
        var id = '{$id}';
        var search_name = '{$search_name}'; // 搜索名字
        var content_area = '{$content_area}'; //上课内容
        var remarks_area = '{$remarks_area}'; //上课备注
        var campus_id = '{$campus_id}'; //上课备注
        $('input[name=student_name]').val(search_name);
        $('textarea[name=content_area]').val(content_area);
        $('textarea[name=remarks_area]').val(remarks_area);

        $('#search').click(function () {
            var field = {};
            var student_lists = JSON.stringify(jsondata);
            field.student_name = $('input[name=student_name]').val();
            field.content_area = $('textarea[name=content_area]').val();
            field.remarks_area = $('textarea[name=remarks_area]').val();
            field.student_lists = student_lists;
            if(field.student_name.length <= 0){
                layer.msg("请输入学生名称");
                return false;
            }
            field.id = id;
            $.ajax({
                url: '/admin/arranging/roll_call',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        location.reload();
                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            return false;
        });

        //表头设置课消数量
        $("#class_elimination_head").bind('input propertychange', function () {
            var head_value = $("#class_elimination_head").val();
            var elimination_item =  document.getElementsByName("elimination_item");
            var obj_box  =  document.getElementById("showTb"); //获取表格的对象
            for(var i =0; i < elimination_item.length; i ++){
                elimination_item[i].value = head_value;
            }


        });


        //添加学员
        $('#add_students').click(function () {

            layer.open({
                skin: 'layui-layer-lan',
                type: 2,
                closeBtn: 2,
                title: '选择学员',
                area: ['95%', '95%'],
                shadeClose: false,
                content: "{:url('Arranging/add_students')}?info_id=" + id + "&status=" + true + "&campus_id=" + campus_id,
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                },


                end: function(){
                    var field = {};
                    field.content_area = $('textarea[name=content_area]').val();
                    field.remarks_area = $('textarea[name=remarks_area]').val();
                    field.id = id;
                    field.campus_id = campus_id;
                    field.status = 2;
                    $.ajax({
                        url: "/admin/arranging/rest",
                        method: "post",
                        data: field,
                        beforeSend: function () {
                            isLoad = layer.load(0, {
                                shade: false
                            }); //0代表加载的风格，支持0-2
                        },
                        success: function (result) {
                            layer.msg(result.msg);
                            if (result.code === 1) {
                                location.reload();
                            }

                        },
                        complete: function () {
                            layer.close(isLoad)
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    });
                    return false;
                }


            });
            return false;
        });


        //重置
        $('#rest').click(function () {
            var field = {};
            field.content_area = $('textarea[name=content_area]').val();
            field.remarks_area = $('textarea[name=remarks_area]').val();
            field.id = id;
            field.campus_id = campus_id;
            field.status = 2;
            $.ajax({
                url: '/admin/arranging/rest',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        location.reload();
                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            return false;
        });

        //监听提交
        form.on('submit(sure)', function (data) {
            var inputs = document.getElementsByName("attendance_item");  //出勤
            var inputs_charging = document.getElementsByName("charging_item");  //计费
            var remarks = document.getElementsByName("remarks");  //备注
            var reasons = document.getElementsByName("reasons");  //原因
            var remarks_area = $('textarea[name=remarks_area]').val();//课节备注
            var content_area = $('textarea[name=content_area]').val();//课节内容
            var elimination_status = document.getElementsByName("elimination");  //是否选中动态课消
            var elimination_item = document.getElementsByName("elimination_item");  //是否选中动态课消
            var arr_json = [];

            for(var i=0;i<inputs.length;i++){

                if(!inputs[i].checked && !inputs_charging[i].checked && reasons[i].value.length <= 0){

                    layer.msg('请选择学员的出勤、计费等状态');
                    return false;
                }
            }


            for(var i=0;i<inputs.length;i++){
                var row = {};
                row.student_id = jsondata[i].student_id;
                row.id = jsondata[i].id;
                row.student_type = jsondata[i].student_type;
                if(inputs[i].checked){
                    row.attendance = 1; //已考勤
                }else{
                    row.attendance = 0; //未考勤

                    if(reasons[i].value.length <= 0){
                        layer.msg('请填写缺勤原因');
                        return;
                    }

                }
                /*
                if(jsondata[i].student_type != 3){
                    if(inputs_charging[i].checked){
                        row.charging = 1; //已计费
                    }else{
                        row.charging = 0; //未计费
                    }
                }
                */

                if(inputs_charging[i].checked){
                    row.charging = 1; //已计费
                }else{
                    row.charging = 0; //未计费
                }


                //动态课消是否开启
                if(elimination_status[0].value == 1){
                    row.eliminated_nums = elimination_item[i].value;//课消节数，默认为1;动态课消则可自由调整
                }else if(elimination_status[0].value == 0){
                    row.eliminated_nums = 1;//课消节数，默认为1;动态课消则可自由调整
                }



                row.remarks = remarks[i].value;  //备注
                row.attendance_reasons = reasons[i].value; //原因
                row.remarks_area = remarks_area;//课节备注
                row.content_area = content_area;//课节内容
                arr_json.push(row);
            }

            if(arr_json.length <= 0){
                layer.msg('无学员信息');
                return;
            }
            var field = {};
            field.arr_json = JSON.stringify(arr_json);
            field.id = id;
            $.ajax({
                url: '/admin/arranging/submission',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        var field = {};
                        field.id = id;
                        $.ajax({
                            url: '/admin/arranging/close',
                            method: "post",
                            data: field,
                            beforeSend: function () {
                                isLoad = layer.load(0, {
                                    shade: false
                                }); //0代表加载的风格，支持0-2
                            },
                            success: function (result) {
                                layer.msg(result.msg);
                                if (result.code === 1) {
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }

                            },
                            complete: function () {
                                layer.close(isLoad)
                            },
                            error: function (error) {
                                console.log(error)
                            }
                        });
                        return false;


                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });


            return false;
        });


        //监听取消
        form.on('submit(cancel)', function (data) {
            var field = {};
            field.id = id;
            $.ajax({
                url: '/admin/arranging/close',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    }

                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            return false;
        });

        /**考勤全选*/
        form.on('checkbox(attendance)', function(obj){
            /*
             console.log(data.elem); //得到checkbox原始DOM对象
             console.log(data.elem.checked); //是否被选中，true或者false
             console.log(data.value); //复选框value值，也可以通过data.elem.value得到
             console.log(data.othis); //得到美化后的DOM对象
             */

            var inputs = document.getElementsByName("attendance_item");  //出勤
            var inputs_charging = document.getElementsByName("charging_item");  //计费
            var charging = document.getElementsByName("charging");//计费
            var obj_box  =  document.getElementById("showTb"); //获取表格的对象
            var nums = 0;
            for(var i=0;i<inputs.length;i++){
                if(obj.elem.checked == true){
                    inputs[i].checked = true;
                    /*
                    if(jsondata[i].student_type != 3){
                        inputs_charging[i].checked = true;

                    }
                    */
                    inputs_charging[i].checked = true;

                    nums ++ ;
                    charging[0].checked = true;

                }else{
                    inputs[i].checked = false;
                    /*
                    if(jsondata[i].student_type != 3) {
                        inputs_charging[i].checked = false;
                    }
                    */
                    inputs_charging[i].checked = false;
                    charging[0].checked = false;

                }

            }
            for(i=0;i<obj_box.rows.length;i++)
            {
                obj_box.rows[jsondata.length+1].cells[5].innerHTML = '<span style="color: #00b7ee">出勤:'+nums+'(人)</span>';
                obj_box.rows[jsondata.length+1].cells[6].innerHTML = '<span style="color: #00b7ee">计费:'+nums+'(人)</span>';
            }


            form.render('checkbox');
        });

        /***课消**/
        form.on('checkbox(elimination)',function (obj) {

            if(obj.elem.checked){
                show(3);
                $("input[name='elimination']:checked").val(1);  //设置value
                layer.msg('开启动态课消');
            }else{
                Hide(3);
                $("input[name='elimination']").val(0);
                layer.msg('关闭动态课消');
            }


        });
        
        /**计费全选*/
        form.on('checkbox(charging)', function(obj){
            /*
             console.log(data.elem); //得到checkbox原始DOM对象
             console.log(data.elem.checked); //是否被选中，true或者false
             console.log(data.value); //复选框value值，也可以通过data.elem.value得到
             console.log(data.othis); //得到美化后的DOM对象
             */
            var inputs_charging = document.getElementsByName("charging_item");  //计费
            var obj_box  =  document.getElementById("showTb"); //获取表格的对象
            var nums = 0;
            var student_type = 0;
            for(var i=0;i<inputs_charging.length;i++) {
                if (obj.elem.checked == true) {
                    inputs_charging[i].checked = true;
                    nums ++;
                } else {
                    inputs_charging[i].checked = false;

                }
            }
            /*
            for(var i =0; i < jsondata.length; i ++){

                if(jsondata[i].student_type == 3){
                    student_type ++;
                }
            }
            */

            for(i=0;i<obj_box.rows.length;i++)
            {
                obj_box.rows[jsondata.length+1].cells[6].innerHTML = '<span style="color: #00b7ee">计费:'+(nums+student_type)+'(人)</span>';
            }
            form.render('checkbox');
        });



        /**单个考勤*/
        form.on('checkbox(attendance_item)', function(obj){

            var inputs_attendance = document.getElementsByName("attendance_item");  //考勤
            var inputs_charging = document.getElementsByName("charging_item");  //计费
            var charging = document.getElementsByName("charging");//计费
            var attendance = document.getElementsByName("attendance");  //出勤
            var obj_box  =  document.getElementById("showTb"); //获取表格的对象
            var nums = 0;
            var nums_ = 0;
            var status = false;
            var student_type = 0;
            for(var i=0;i<inputs_attendance.length;i++) {
                if (inputs_attendance[i].checked == true) {
                    /*
                    if(jsondata[i].student_type != 3){
                        inputs_charging[i].checked = true;
                    }else{
                        student_type ++;
                    }
                    */
                    inputs_charging[i].checked = true;
                    nums_++;
                } else if(inputs_attendance[i].checked == false){
                    status = true;
                    /*
                    if(jsondata[i].student_type != 3){
                        inputs_charging[i].checked = false;
                    }
                    */
                    inputs_charging[i].checked = false;

                }
            }

            for(var i=0;i<inputs_charging.length;i++) {
                if (inputs_charging[i].checked == true) {
                    nums ++ ;
                }
            }


            if(status){
                charging[0].checked = false;
                attendance[0].checked = false;
            }else{
                charging[0].checked = true;
                attendance[0].checked = true;
            }
            for(i=0;i<obj_box.rows.length;i++)
            {
                obj_box.rows[jsondata.length+1].cells[5].innerHTML = '<span style="color: #00b7ee">出勤:'+nums_+'(人)</span>';
                obj_box.rows[jsondata.length+1].cells[6].innerHTML = '<span style="color: #00b7ee">计费:'+(nums+student_type)+'(人)</span>';
            }
            form.render('checkbox');
        });


        /**单个计费*/
        form.on('checkbox(charging_item)', function(obj){
            var inputs_attendance = document.getElementsByName("attendance_item");  //考勤
            var inputs_charging = document.getElementsByName("charging_item");  //计费
            var charging = document.getElementsByName("charging");//计费
            var obj_box  =  document.getElementById("showTb"); //获取表格的对象
            var nums = 0;
            var status = false;
            for(var i=0;i<inputs_charging.length;i++) {
                if (inputs_charging[i].checked == true) {
                    inputs_charging[i].checked = true;
                    nums ++;
                } else {
                    inputs_charging[i].checked = false;
                    status = true;
                }
            }
            if(status){
                charging[0].checked = false;

            }else{
                charging[0].checked = true;

            }

            for(i=0;i<obj_box.rows.length;i++)
            {
                obj_box.rows[jsondata.length+1].cells[6].innerHTML = '<span style="color: #00b7ee">计费:'+nums+'(人)</span>';
            }
            form.render('checkbox');
        });


    });


</script>
